<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>修改小说基本信息</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <!-- 引入 Element UI 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>

</head>
<body>

<div id="app">

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>修改小说基本信息</legend>
  </fieldset>


  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="小说书名"  style="width: 50%;">
      <el-input v-model="form.title"  ></el-input>
    </el-form-item>
    <el-form-item label="作者">
      <el-select v-model="form.authorId" placeholder="请选择">
        <el-option
                v-for="item in author"
                :key="item.authorId"
                :label="item.authorName"
                :value="item.authorId">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="小说类型">
      <el-select v-model="form.categoryId" placeholder="请选择">
        <el-option
                v-for="item in category "
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="小说状态" >
      <el-radio-group v-model="form.statu">
        <el-radio :label="1">连载中</el-radio>
        <el-radio :label="0">已完结</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="小说频道" >
      <el-radio-group v-model="form.sex">
        <el-radio :label="1">男频</el-radio>
        <el-radio :label="0">女频</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="小说封面">
      <el-upload
              class="avatar-uploader"
              action="/novel/upImg/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
        <img v-if=" form.coverImage" :src=" form.coverImage" class="avatar"  >
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="小说简介"  style="width: 50%;">
      <el-input type="textarea" v-model="form.introduction"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即修改</el-button>

    </el-form-item>
  </el-form>



</div>




<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>


<script>

  var v = new Vue({
    el: '#app',
    data() {
      return {

        form: {
          title: '',
          authorId: '',
          categoryId: '',
          statu:  '0',
          sex: '1',
          coverImage: '',
          introduction: '',


        },
        category: [],
        author: [],
        novel:{
          novelId: '',
        },


      }

    },
    mounted() {
      axios.get('author/select').then(res => {
        this.author = res.data;

      });
      axios.get('category/select').then(res => {
        this.category = res.data;

      });

      // 获取 URL 中的参数值（以 # 号分隔）
      let hashValue = window.location.hash;

      // 去掉 # 号，只保留值部分
      this.novel.novelId  = hashValue.substring(1);



      axios.post('novel/selectnovelId',this.novel).then(res => {
        this.form = res.data;
      });



    },
    methods: {
      handleAvatarSuccess(res ) {
        console.log('上传成功，服务器返回的数据：', res);
        this.form.coverImage = res;

      },
      beforeAvatarUpload(file) {

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return   isLt2M;
      },
      onSubmit(){
        axios.post('novel/update',this.form).then(res => {
          if(res.data == 1){
              alert('修改成功');
          }

        });

      },






    }
  });




</script>

</body>
</html>